import React from 'react';
import cass from 'classnames';
import styles from './index.module.less';

const type = {
    '1': { label: '民' },
    '2': { label: '刑' },
    '3': { label: '法' },
    '4': { label: '专' },
}

export default function ProjectItem ({ innerRef, data: v, activeRecid, onClick, replaceFun }) {
    return (
        <div 
            ref={innerRef}
            key={v.recid}
            className={cass('hovergray', styles.wrapItem, { [styles.active]: activeRecid === v.recid })}
            onClick={onClick}
        >
            <div
                className={cass(styles.left, { [styles.iscomplete]: v.iscomplete})}
            >
                {type[v.projecttype].label}
            </div>
            <div className={styles.right}>
                <h3 dangerouslySetInnerHTML={replaceFun ? { __html: replaceFun(v.recname) } : undefined}>
                    {replaceFun ? null : v.recname}
                </h3>
                {v.stages.map((s, i) => (
                    <div key={i}>
                        {s.iscomplete ? <span className={cass('mdi mdi-checkbox-marked-circle', styles.check)}/> : null}
                        {`[${s.stagename}] 委托人：${s.clients.join(';')}`}
                        {s.host ? <span className={cass('mdi', 'mdi-flag', styles.flag)} key="flag" /> : null}
                    </div>
                ))}
            </div>
        </div>
    )
}